<template>
  <div class="echarts-wall" :style="echartsStyle">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {ElMessage} from "element-plus";
// @ts-ignore
import screenConfig, {getMarkPoint} from '@/components/global/bigscreen/screen_config'

defineOptions({
  name: "EchartsPie"
});
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

const loading = ref<boolean>(false);

const props = defineProps({
      //显示legend
      legendShow: {type: Boolean, default: false},
      legendOrient: {type: String, default: 'vertical'},//vertical
      legendLeft: {type: String, default: 'left'},//vertical
      color: {
        type: Array, default: function () {
          return ['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622']
        }
      },
      seriesRadius: {
        type: Object, default: function () {
          return "50%"
        }
      },
      seriesLabelShow: {type: Boolean, default: false},
      seriesLabelLineShow: {type: Boolean, default: true},
      seriesLabelPosition: {type: String, default: ''},      //请求url
      emphasisLabelFontShow: {type: Boolean, default: false},
      emphasisLabelFontSize: {type: Number, default: 20},
      itemStyleBorderRadius: {type: Number, default: 0},
      itemStyleBorderColor: {type: String, default: "#fff"},
      itemStyleBorderWidth: {type: Number, default: 0},
      seriesRoseType: {type: String, default: ""},
      url: {
        type: String, default: ''
      },
      params: {
        type: Object, default: {}
      }
    }
);
// dom 组件
const echartsDom = ref<any>(null);

const echartsStyle = ref<any>({});

// @ts-ignore
let {proxy} = getCurrentInstance()

//
let myEcharts: any = null;

onMounted(() => {
  initEcharts()
})

//监听查询条件
watch(() => props.params, () => {
  initEcharts();
})
const initEcharts = () => {
  getData().then((option: any) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  });
}

const legend = () => {
  return {
    show: props.legendShow,
    orient: props.legendOrient,
    left: props.legendLeft,
    textStyle: {
      fontSize: screenConfig.legendFontSize,
      fontFamily: screenConfig.legendFontFamily,
      color: screenConfig.legendFontColor,
    },
  }
}

const tooltip = () => {
  return {
    show: true,
    trigger: 'item', //axis , item
    backgroundColor: 'RGBA(0, 49, 85, 1)',
    borderColor: 'rgba(0, 151, 251, 1)',
    borderWidth: 1,
    borderRadius: 0,
    textStyle: {
      color: '#BCE9FC',
      fontSize: 16,
      align: 'left',
    },
  }
}
const getData = () => {
  return new Promise((resolve, reject) => {
        if (props.url) {
          proxy.$http.post(props.url, props.params)
              .then((apiResponse: any) => {
                    if (apiResponse.success || apiResponse.data) {
                      //x轴数据
                      let xData: any = [];

                      let vMarkerData: any = [];

                      //series
                      let series: any = [];
                      //获取的数据
                      let echartsData = apiResponse.data.echartsData;
                      let i = 0;
                      Object.keys(echartsData).forEach((key: string) => {
                        let mSeries: any = {
                          name: key,
                          type: 'pie',
                          radius: props.seriesRadius,
                          data: echartsData[key],
                          avoidLabelOverlap: false,
                          itemStyle: {
                            borderRadius: props.itemStyleBorderRadius,
                            borderColor: props.itemStyleBorderColor,
                            borderWidth: props.itemStyleBorderWidth,
                          },
                          label: {
                            show: props.seriesLabelShow,
                          },
                          labelLine: {
                            show: props.seriesLabelLineShow,
                            lineStyle: {
                              color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                          },
                          roseType: props.seriesRoseType,
                          emphasis: {
                            label: {
                              show: props.emphasisLabelFontShow,
                              fontSize: props.emphasisLabelFontSize,
                              fontWeight: 'bold'
                            },
                            itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                          }
                        }
                        if (props.seriesLabelPosition && props.seriesLabelShow) {
                          mSeries.label = {
                            show: props.seriesLabelShow,
                            position: props.seriesLabelPosition
                          }
                        }
                        series.push(mSeries);
                        i++;
                      });

                      let option: any = {
                        color:props.color,
                        backgroundColor: 'transparent',
                        legend: legend(),
                        tooltip: tooltip(),
                        series
                      };
                      resolve(option);
                    } else {
                      ElMessage.error("数据格式异常,本组件接收数据类型")
                    }
                  }
                  ,
                  (err: any) => {
                    reject(err);
                  }
              )
        } else {
          reject("无法获取请求地址");
        }
      }
  )
}


</script>